<!doctype html>
<title>{% block title %}{% endblock %} - Treasure Island</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script> -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var namespace = '/test';
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
    // window.setInterval(function() {
    //     socket.emit('my_ping');
    // }, 1000);
  $(document).ready(function(){
    // var namespace = '/test';
    // var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
    // socket.on('connect', function() {
    //     socket.emit('my_event', {data: 'I\'m connected!'});
    // });
    // socket.on('my_response', function(msg) {
    //     $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
    // });

    // var ping_pong_times = [];
    // var start_time;
    // window.setInterval(function() {
    //     start_time = (new Date).getTime();
    //     socket.emit('my_ping');
    // }, 1000);
    // socket.on('my_pong', function() {
    //     var latency = (new Date).getTime() - start_time;
    //     ping_pong_times.push(latency);
    //     ping_pong_times = ping_pong_times.slice(-30); // keep last 30 samples
    //     var sum = 0;
    //     for (var i = 0; i < ping_pong_times.length; i++)
    //         sum += ping_pong_times[i];
    //     $('#ping-pong').text(Math.round(10 * sum / ping_pong_times.length) / 10);
    // });

    // $('form#emit').submit(function(event) {
    //     socket.emit('my_event', {data: $('#emit_data').val()});
    //     return false;
    // });
    // $('form#broadcast').submit(function(event) {
    //     socket.emit('my_broadcast_event', {data: $('#broadcast_data').val()});
    //     return false;
    // });
    // $('form#join').submit(function(event) {
    //     socket.emit('join', {room: $('#join_room').val()});
    //     return false;
    // });
    // $('form#leave').submit(function(event) {
    //     socket.emit('leave', {room: $('#leave_room').val()});
    //     return false;
    // });
    // $('form#send_room').submit(function(event) {
    //     socket.emit('my_room_event', {room: $('#room_name').val(), data: $('#room_data').val()});
    //     return false;
    // });
    // $('form#close').submit(function(event) {
    //     socket.emit('close_room', {room: $('#close_room').val()});
    //     return false;
    // });
    // $('form#disconnect').submit(function(event) {
    //     socket.emit('disconnect_request');
    //     return false;
    // });

    // socket.on('room_sync', function(members, boxes) {
    //     console.log(members);
    //     console.log(boxes);
    // });

  });
</script>
<nav>
  <h1><a href="{{ url_for('index') }}">Treasure Island</a></h1>
  <ul>
    {% if g.user %}
      <li><span>{{ g.user['username'] }}</span>
      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
    {% else %}
      <li><a href="{{ url_for('auth.register') }}">Register</a>
      <li><a href="{{ url_for('auth.login') }}">Log In</a>
    {% endif %}
  </ul>
</nav>
<section class="content">
  <header>
    {% block header %}{% endblock %}
  </header>
  {% for message in get_flashed_messages() %}
    <div class="flash">{{ message }}</div>
  {% endfor %}
  {% block content %}{% endblock %}
</section>
